<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 面试进行中</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/candidate/interview-room.css" rel="stylesheet">
</head>
<body>
    <div class="interview-room">
        <!-- 顶部信息栏 -->
        <div class="top-bar">
            <div class="interview-info">
                <h1>字节跳动 - 前端开发工程师</h1>
                <span class="timer">15:30</span>
            </div>
            <div class="interview-controls">
                <button class="btn-icon" id="toggleMic" onclick="toggleMicrophone()">
                    <i class='bx bxs-microphone'></i>
                </button>
                <button class="btn-icon" id="toggleCamera" onclick="toggleCamera()">
                    <i class='bx bxs-video'></i>
                </button>
                <button class="btn-icon" id="toggleSettings" onclick="toggleSettings()">
                    <i class='bx bxs-cog'></i>
                </button>
                <div class="end-interview-group">
                    <button class="btn-icon" id="toggleFullscreen" onclick="toggleFullscreen()">
                        <i class='bx bx-fullscreen'></i>
                    </button>
                    <button class="btn-danger" id="endInterview" onclick="endInterview()">
                        结束面试
                    </button>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 面试官区域 -->
            <div class="interviewer-area">
                <div class="digital-human">
                    <!-- 这里放置数字人画面 -->
                </div>
            </div>

            <!-- 右侧区域 -->
            <div class="right-panel">
                <!-- 用户摄像头预览 -->
                <div class="camera-preview">
                    <video id="userVideo" autoplay muted></video>
                    <div class="mic-indicator">
                        <i class='bx bx-microphone'></i>
                    </div>
                </div>

                <!-- 对话区域 -->
                <div class="chat-area">
                    <div class="chat-messages" id="chatMessages">
                        <!-- 对话内容会动态添加 -->
                    </div>
                    <div class="chat-input">
                        <textarea 
                            placeholder="按住空格键说话，或直接输入文字..."
                            rows="1"
                        ></textarea>
                        <button class="btn-send">
                            <i class='bx bx-send'></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置模态框 -->
        <div class="modal fade" id="settingsModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">设备设置</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="setting-item">
                            <label>麦克风</label>
                            <select class="form-select" id="micSelect">
                                <option value="">选择麦克风...</option>
                            </select>
                            <div class="device-test">
                                <div class="volume-indicator"></div>
                                <button class="btn btn-sm btn-outline-primary test-btn">
                                    <i class='bx bx-play'></i>测试
                                </button>
                            </div>
                        </div>
                        <div class="setting-item">
                            <label>摄像头</label>
                            <select class="form-select" id="cameraSelect">
                                <option value="">选择摄像头...</option>
                            </select>
                            <div class="camera-test">
                                <video id="testVideo" autoplay muted></video>
                            </div>
                        </div>
                        <div class="setting-item">
                            <label>麦克风模式</label>
                            <div class="mic-mode">
                                <label class="mode-option">
                                    <input type="radio" name="micMode" value="auto" checked>
                                    <span>自动开启</span>
                                </label>
                                <label class="mode-option">
                                    <input type="radio" name="micMode" value="manual">
                                    <span>按需开启（空格键）</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveSettings()">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/candidate/interview-room.js"></script>
</body>
</html> 